<!DOCTYPE html>
<html>
<head>
<title>Table sample with colgroup</title>
<!-- 14/01/26 j.j.king for table helper test -->
<!-- 14/01/26 thead/tfoot removed from thead-tfoot-resize.html; added colgroup -->

<style>
/* table, thead, tfoot, tbody, tr, td, th { margin: 0; padding: 0; } */

table { border-collapse: collapse; }
td { border: solid thin gray; }

/*
table thead tr { display: block; }
table tfoot tr { display: block; }
table tbody tr { display: block; }
*/

table thead { display: block; }
table tfoot { display: block; }
table tbody { display: block; }
table tbody { overflow-y: scroll; height: 100px; }

/*
table tbody { border: solid thin gray; }
table thead { border: solid thin gray; }
table tfoot { border: solid thin gray; }
*/

</style>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="https://github.com/cowboy/jquery-resize/raw/master/jquery.ba-resize.js"></script>
<script src="jjkingTableHelper.js"></script>
<script>

$(document).ready(function()
{
	console.log('ready');
	
	$('#colgroupButton').on('click', function(e)
	{
		var col = $('#colgroup col:first');
		col.prop('width', parseInt(col.prop('width')) + 10);
		
		// Note: Changing the width of a col in colgroup triggers a resize event
		// if resize plugin is installed and thus running a resize event handler
		// if installed.

		/**
		jjkingTableHelper.resizeWidthAgainstColgroup($('#colgroup'),
			[ document.getElementById('header'),
			  document.getElementById('body'),
			  document.getElementById('footer') ]);
		**/
	});
});

</script>
</head>
<body style="margin: 2em">

<h3>A body-only table with colgroup</h3>

<p>
You don't need any special mechanism to reflect change in 'width' of 'col' element in 'colgroup'
to the body table.
</p>

<p>
<button id="colgroupButton">Change 'width' attribute of a 'col' element in 'colgroup' element</button>
</p>

<table>
	<colgroup id="colgroup">
		<col width="200"/>
		<col width="200"/>
		<col width="200"/>
	</colgroup>
	<tbody id="body">
		<tr>
			<td>One</td>
			<td>Two</td>
			<td>Three</td>
		</tr>
		<tr>
			<td>One and One</td>
			<td>Two and Two</td>
			<td>Three and Three</td>
		</tr>
		<tr>
			<td>One</td>
			<td>Two</td>
			<td>Three</td>
		</tr>
		<tr>
			<td>One and One</td>
			<td>Two and Two</td>
			<td>Three and Three</td>
		</tr>
		<tr>
			<td>One</td>
			<td>Two</td>
			<td>Three</td>
		</tr>
		<tr>
			<td>One</td>
			<td>Two</td>
			<td>Three</td>
		</tr>
	</tbody>
</table>

<hr style="margin-top: 2em"/>

<h3>A note about thead and tfoot used with colgroup</h3>

<p>
However, if you add a header and/or footer, you need some machanism to align them with the body table
when you change 'width' attribute of 'col' element in 'colgroup'.
</p>
<p>
I first tried to align thead, tbody with scrollbar and tfoot with colgroup/col specification.
They did not fit well.
Calling jjkingTableHelper.resizeWidthAgainstColgroup() did not perfectly solve the problem.
This did not work as I expected; the scroll bar width is not handled properly as shown in
the screen capture below.
</p>

<img src="thead-tfoot-colgroup.png" style="border: solid thin gray"/>

</body>
</html>